<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div style="width: 100px;height: 100px;background-color: orange;" id="mydiv" onkeypress="keyPress()" tabindex="1">

  <!-- <div style="width: 100px;height: 100px;background-color: orange;" id="mydiv"> -->
    <!-- <input/> -->
    <select name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      </select>
  </div>

  <script>

    function keyPress() {
      alert("123")
    }

    // const el = document.querySelector("#mydiv")
    // el.addEventListener('keypress', () => {
    //   alert('2222')
    // })

    // document.addEventListener('keypress', (event) => {
    //   alert('2222', event)
    //   console.log(event)
    // })
  </script>
</body>

</html>